<template>
  <div>
    <div class="category">
      <ul>
        <!-- 遍历生成手机分类栏 -->

        <li class="categoryli" v-for="(category, index) in categorylist" :key="index">
          <div
            class="category-detail"
            @mouseenter="changeActive(index)"
            @mouseleave="onMousteOut()"
          >
            <div>{{category.name}}</div>
            <div>
              <i class="el-icon-arrow-right"></i>
            </div>
            <transition name="el-fade-in-linear">
              <div class="category-contain" v-show="seen&&index==current">
                <el-row
                  class="category-contain-detail"
                  v-for="index2 in rowOfPages(category.children.length,5)"
                  :key="index2"
                >
                  <el-col v-for="(index3) in colOfPages(category.children.length,5)" :key="index3">
                    <div class="categorydetail" v-if="category.children[(index3-1)*5+index2-1]">
                      <div
                        class="categorydetail-name"
                      >{{category.children[(index3-1)*5+index2-1].name}}</div>
                      <div class="categorydetail-img">
                        <img
                          :src="category.children[(index3-1)*5+index2-1].img"
                          width="50px"
                          height="50px"
                        />
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </transition>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      categorylist: [
        {
          name: "小米",
          children: [
            {
              name: "小米10",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "小米9",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "小米8",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "小米7",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "小米6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
          ],
        },
        {
          name: "OPPO",
          children: [
            {
              name: "oppo1",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "oppo2",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "oppo3",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "oppo4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
          ],
        },
        {
          name: "IPHONE",
          children: [
            {
              name: "iphone1",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "iphone2",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "iphone3",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "iphone4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "iphone5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "iphone6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
          ],
        },
        {
          name: "魅族",
          children: [
            {
              name: "魅族1",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族2",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族3",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族1",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族2",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族3",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
          ],
        },
        {
          name: "华为",
          children: [
            {
              name: "华为1",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "华为2",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "华为3",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
          ],
        },
        {
          name:'SNMSUMG',
          children: [
            {
              name: "魅族1",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族2",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族3",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族1",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族2",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族3",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族4",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族5",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
            {
              name: "魅族6",
              img:
                "https://res0.vmallres.com/pimages//product/6901443391967/428_428_3F15B3F159FCB2929091EAD02F81B3E9156F0B2FE71F8433mp.png",
            },
          ],
        }
      ],
      seen: false,
      current: 0,
      // 请求页数参数
      pageConfig: {
        pageNum: 5,
        pageSize: 1,
      },
    };
  },
  methods: {
    //   handleOpen(key, keyPath) {
    //     console.log(key, keyPath);
    //   },
    //   handleClose(key, keyPath) {
    //     console.log(key, keyPath);
    //   }
    // 获取商品分类
    async getprolist() {
      // const pageNum = this.pageConfig.pageNum
      // const pageSize = this.pageConfig.pageSize
      // const res = await this.$http.get('product/getAllProduct',{params: {
      //     pageNum: pageNum,
      //     pageSize: pageSize
      //   }})
      // console.log('商品分类',res);
      console.log(this.shopCateList);
    },
    changeActive(index) {
      this.seen = true;
      this.current = index;
      console.log(this.categorylist[1].children.length);
    },
    onMousteOut() {
      this.seen = false; //鼠标移出隐藏
      this.current = null;
    },
  },
  mounted() {
    // console.log("分类",this.shopCateList);
    // console.log(this.categorylist[1].children[1].name);
  },
  computed: {
    // 列
    colOfPages() {
      return function (num1, num2) {
        const result = Math.ceil(num1 / num2);
        // console.log(result);
        return result;
      };
    },
    //行
    rowOfPages() {
      return function (num1, num2) {
        if (num1 <= num2) {
          const result = Math.ceil(num1 % num2);
          // console.log(result);
          return result == 0 ? 5 : result;
        } else {
          return num2;
        }
      };
    },
    tagger() {
      return function (num1, num2) {
        return (num1 - 1) * 5 + num2 - 1;
      };
    },
    ...mapState({
      shopCateList: (state) => state.cate.shopCateList,
    }),
  },
  created() {
    this.getprolist();
  },
};
</script>

<style lang="less" scope>
.category:hover {
  border-radius: 10px 0px 0px 10px;
}
.category {
  z-index: 2;
  top: 10px;
  width: 180px;
  left: 10%;
  position: absolute;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px 10px 10px 10px;
  cursor: pointer;
  ul {
    //   width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    list-style: none;
    li {
      //   display: table-column;
      color: #848484;
      height: 43px;
      .category-detail {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 10px;
        justify-content: space-between;
      }
      .category-contain {
        position: absolute;
        padding: 20px;
        max-width: 700px;
        overflow: hidden;
        // height: 500px;
        max-height: 400px;
        margin-bottom: 10px;
        border-radius: 0px 10px 10px 10px;
        left: 180px;
        top: 0px;
        background-color: rgb(255, 255, 255);
        .category-contain-detail {
          display: flex;
          margin-bottom: 20px;
          align-items: center;
          color: #848484;
          .categorydetail {
            width: 200px;
            padding: 5px 10px;
            border-radius: 10px;
            display: flex;
            margin-left: 20px;
            align-items: center;
            .categorydetail-name {
              margin-right: auto;
            }
          }
          .categorydetail:hover {
            //  box-shadow: 0 0 28px rgba(0, 0, 0, 0.3);
            color: orange;
            background-color: #f6f6f6;
          }
        }
      }
    }
  }
  .categoryli:hover {
    background-color: #fff;
    color: orange;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.1);
  }
}
</style>